/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState } from "react";
import { Outlet, useNavigate } from "react-router-dom";

import { AppstoreOutlined, CarryOutOutlined } from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Menu } from "antd";
import "../../../styles/HuangYuDong/ShouYe/ShouYe.scss";
// 左侧导航
type MenuItem = Required<MenuProps>["items"][number];
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode
): MenuItem {
  return {
    key,
    icon,
    label,
  } as MenuItem;
}
const items: MenuProps["items"] = [
  getItem("工作台", "/index/shouye/workbench", <AppstoreOutlined />),
  getItem("日程待办", "/index/shouye/daiban", <CarryOutOutlined />),
];

function ShouYe(props: any) {
  // 高亮
  let [key, useKey] = useState("/index/shouye/workbench");
  // 路由跳转
  let ator = useNavigate();
  const onClick: MenuProps["onClick"] = (e) => {
    console.log("click ", e);
    ator(e.key);
    useKey(e.key);
  };
  return (
    <div className="shouye">
      <Menu
        // className="shouye-top"
        onClick={onClick}
        style={{ width: 256 }}
        defaultSelectedKeys={["/index/shouye/workbench"]}
        defaultOpenKeys={[key]}
        mode="inline"
        items={items}
      />
      <div className="shouye-right">
        <Outlet></Outlet>
      </div>
    </div>
  );
}

export default ShouYe;
